<template>
  <div id="ibu_hotel_container">
    <div class="m-homePage m-hbuPage">
      <div class="top">
        <div class="ellipse-wrap">
          <div class="ellipse">
            <div class="bg" style="background: url('https://dimg02.c-ctrip.com/images/10031e000001fq0hcB1E3.jpg_.webp') right top / cover no-repeat;"></div>
          </div>
        </div>
        <div class="main-topic">
          <!-- <div class="slogan"></div> -->
        </div>
        <div class="inner-page">
          <div class="list-search-container needFix">
            <div class="inner-wrap">
              <ul class="ul" role="booking">
                <li class="list-item li-item-calendar list-calendar" style="width:50%">
                  <div class="block" style="width:90%">
                    <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:100%">
                    </el-date-picker>
                  </div>
                </li>
                <li class="list-item li-item-keyword list-keyword" style="width:50%">
                  <el-autocomplete v-model="states" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect" style="width:90%" value-key="name"></el-autocomplete>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="inner-page">
        <div class="m-recentHotels"></div>
        <!-- 轮播图 -->
        <div class=".swiper-container  myswiper" ref="mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="https://dimg04.c-ctrip.com/images/0zg45120009cdfu6x9D76.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img src="https://dimg04.c-ctrip.com/images/0zg50120009c08i3bADF6.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img src="https://dimg04.c-ctrip.com/images/0zg54120009c4nghuD9B9.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img src="https://dimg04.c-ctrip.com/images/0zg60120009cdftvtCB71.jpg" alt="">
            </div>
            <div class="swiper-slide">
              <img src="https://dimg04.c-ctrip.com/images/0zg5n1200098dww3eDF39.jpg" alt="">
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
        </div>
        <div class="home-server-upgrade">
          <h3>酒店业务服务升级</h3>
          <ul>
            <li><span class="icon-logo service1"></span>
              <p class="desc">确认后变更，最高赔付首晚房费的3倍</p>
            </li>
            <li><span class="icon-logo service2"></span>
              <p class="desc">到店无房最高赔付首晚房费的3倍</p>
            </li>
            <li><span class="icon-logo service3"></span>
              <p class="desc">退改服务保障与承诺</p>
            </li>
          </ul>
          <p class="link"><a href="javascript:;">更多 <i type="ic_new_more_line1" class="iconfont icon-arrow-right"></i></a></p>
        </div>
        <div role="product">
          <div class="m-hotelRecommend">
            <h3 class="m-hotelRecommend_title">酒店推荐</h3>
            <div class="m-hotelRecommend_tabs">
              <div class="city" style="width: 90%;display: inline-block;">
                <button radius="lg" class="u-btn u-btn-sm u-btn-radiuslg" :class="[cityActiveNum==index?'u-btn-primary':'u-btn-filter']" v-for="(city, index) in cityList" :key="city.province_id" @click="changeCityNum(city.province_id,index)" style="margin:0px 10px 10px 0"><span>{{city.province}}</span></button>
              </div>
              <div class="m-allcity"><button radius="lg" class="u-btn u-btn-sm u-btn-radiuslg u-btn-filter" onclick="this.parentNode.parentNode.classList.toggle('height');this.lastElementChild.classList.toggle('rotate');"><span>更多</span><i type="ic_new_dropdown_line" class="iconfont icon-arrow-down"></i></button></div>
            </div>
            <div>
              <SwiperBox :SevenHotelList='SevenHotelList'></SwiperBox>
            </div>
          </div>
          <div>
            <div class="m-hotelJoin"><a href="javascript:;" class="join-item"><img alt="酒店加盟" src="../assets/images/join-item1.jpg"></a><a href="javascript:;" class="join-item"><img alt="代理商加盟" src="../assets/images/hotel-supplierJoin.png"></a><a href="javascript:;" class="join-item"><img alt="eBooking酒店管理后台" src="../assets/images/hotel_ebooking.png"></a></div>
            <div class="seo_201305">
              <h4>旅行酒店官网提供酒店预订及价格查询</h4>
              <p class="p">旅行酒店官网为您提供全球200多个国家和地区、9万多个城市的酒店预订及价格查询服务，覆盖酒店数超过170万家。提供各种住宿类型，包括：酒店、宾馆、旅社、客栈、民宿、经济连锁、酒店公寓、青年旅舍、农家乐、别墅、特色住宿等。同时提供酒店图片、房间照片、酒店电话、酒店地址以及真实用户的酒店点评等各类信息，方便用户选择。<span class="seo_more" rel="nofollow">查看全部</span></p>
              <div>
                <dl class="seo_hot sta_fold">
                  <dt>
                    <h4>热门城市</h4>
                  </dt>
                  <dd><a href="javascript:;" title="北京酒店预订">北京酒店</a></dd>
                  <dd><a href="javascript:;" title="上海酒店预订">上海酒店</a></dd>
                  <dd><a href="javascript:;" title="广州酒店预订">广州酒店</a></dd>
                  <dd><a href="javascript:;" title="深圳酒店预订">深圳酒店</a></dd>
                  <dd><a href="javascript:;" title="南京酒店预订">南京酒店</a></dd>
                  <dd><a href="javascript:;" title="杭州酒店预订">杭州酒店</a></dd>
                  <dd><a href="javascript:;" title="成都酒店预订">成都酒店</a></dd>
                  <dd><a href="javascript:;" title="厦门酒店预订">厦门酒店</a></dd>
                  <dd><a href="javascript:;" title="青岛酒店预订">青岛酒店</a></dd>
                  <dd><a href="javascript:;" title="三亚酒店预订">三亚酒店</a></dd>
                  <dd><a href="javascript:;" title="香港酒店预订">香港酒店</a></dd>
                  <dd><a href="javascript:;" title="澳门酒店预订">澳门酒店</a></dd>
                  <dd><a href="javascript:;" title="西安酒店预订">西安酒店</a></dd>
                  <dd><a href="javascript:;" title="苏州酒店预订">苏州酒店</a></dd>
                  <dd><a href="javascript:;" title="长沙酒店预订">长沙酒店</a></dd>
                  <dd><a href="javascript:;" title="武汉酒店预订">武汉酒店</a></dd>
                  <dd><a href="javascript:;" title="大连酒店预订">大连酒店</a></dd>
                  <dd><a href="javascript:;" title="天津酒店预订">天津酒店</a></dd>
                  <dd><a href="javascript:;" title="重庆酒店预订">重庆酒店</a></dd>
                  <dd><a href="javascript:;" title="长春酒店预订">长春酒店</a></dd>
                  <dd><a href="javascript:;" title="济南酒店预订">济南酒店</a></dd>
                  <dd><a href="javascript:;" title="贵阳酒店预订">贵阳酒店</a></dd>
                  <dd><a href="javascript:;" title="昆明酒店预订">昆明酒店</a></dd>
                  <dd><a href="javascript:;" title="郑州酒店预订">郑州酒店</a></dd>
                  <dd><a href="javascript:;" title="银川酒店预订">银川酒店</a></dd>
                  <dd><a href="javascript:;" title="南昌酒店预订">南昌酒店</a></dd>
                  <dd><a href="javascript:;" title="沈阳酒店预订">沈阳酒店</a></dd>
                  <dd><a href="javascript:;" title="石家庄酒店预订">石家庄酒店</a></dd>
                  <dd><a href="javascript:;" title="福州酒店预订">福州酒店</a></dd>
                  <dd><a href="javascript:;" title="合肥酒店预订">合肥酒店</a></dd>
                  <dd><a href="javascript:;" title="南宁酒店预订">南宁酒店</a></dd>
                  <dd><a href="javascript:;" title="乌鲁木齐酒店预订">乌鲁木齐酒店</a></dd>
                  <dd><a href="javascript:;" title="太原酒店预订">太原酒店</a></dd>
                  <dd><a href="javascript:;" title="哈尔滨酒店预订">哈尔滨酒店</a></dd>
                  <dd><a href="javascript:;" title="兰州酒店预订">兰州酒店</a></dd>
                  <dd><a href="javascript:;" title="台北酒店预订">台北酒店</a></dd>
                  <dd><a href="javascript:;" title="拉萨酒店预订">拉萨酒店</a></dd>
                  <dd><a href="javascript:;" title="西宁酒店预订">西宁酒店</a></dd>
                  <dd><a href="javascript:;" title="呼和浩特酒店预订">呼和浩特酒店</a></dd>
                </dl>
                <div class="seo_line"></div>
              </div>
              <div>
                <dl class="seo_hot sta_fold">
                  <dt>
                    <h4>热门景点</h4>
                  </dt>
                  <dd><a href="javascript:;" title="西塘酒店预订">西塘酒店</a></dd>
                  <dd><a href="javascript:;" title="乌镇酒店预订">乌镇酒店</a></dd>
                  <dd><a href="javascript:;" title="鼓浪屿酒店预订">鼓浪屿酒店</a></dd>
                  <dd><a href="javascript:;" title="朱家尖酒店预订">朱家尖酒店</a></dd>
                  <dd><a href="javascript:;" title="普陀山酒店预订">普陀山酒店</a></dd>
                  <dd><a href="javascript:;" title="千岛湖酒店预订">千岛湖酒店</a></dd>
                  <dd><a href="javascript:;" title="涠洲岛酒店预订">涠洲岛酒店</a></dd>
                  <dd><a href="javascript:;" title="泸沽湖酒店预订">泸沽湖酒店</a></dd>
                  <dd><a href="javascript:;" title="莫干山酒店预订">莫干山酒店</a></dd>
                  <dd><a href="javascript:;" title="南浔酒店预订">南浔酒店</a></dd>
                  <dd><a href="javascript:;" title="北戴河酒店预订">北戴河酒店</a></dd>
                  <dd><a href="javascript:;" title="三清山酒店预订">三清山酒店</a></dd>
                </dl>
                <div class="seo_line"></div>
              </div>
              <div>
                <dl class="seo_hot sta_fold">
                  <dt>
                    <h4>省份酒店</h4>
                  </dt>
                  <dd><a href="javascript:;" title="安徽酒店"> 安徽酒店</a></dd>
                  <dd><a href="javascript:;" title="福建酒店">福建酒店</a></dd>
                  <dd><a href="javascript:;" title="甘肃酒店">甘肃酒店</a></dd>
                  <dd><a href="javascript:;" title="广东酒店">广东酒店</a></dd>
                  <dd><a href="javascript:;" title="广西酒店">广西酒店</a></dd>
                  <dd><a href="javascript:;" title="贵州酒店">贵州酒店</a></dd>
                  <dd><a href="javascript:;" title="海南酒店">海南酒店</a></dd>
                  <dd><a href="javascript:;" title="河北酒店">河北酒店</a></dd>
                  <dd><a href="javascript:;" title="黑龙江酒店">黑龙江酒店</a></dd>
                  <dd><a href="javascript:;" title="河南酒店">河南酒店</a></dd>
                  <dd><a href="javascript:;" title="湖北酒店">湖北酒店</a></dd>
                  <dd><a href="javascript:;" title="湖南酒店">湖南酒店</a></dd>
                  <dd><a href="javascript:;" title="江苏酒店">江苏酒店</a></dd>
                  <dd><a href="javascript:;" title="江西酒店">江西酒店</a></dd>
                  <dd><a href="javascript:;" title="吉林酒店">吉林酒店</a></dd>
                  <dd><a href="javascript:;" title="辽宁酒店">辽宁酒店</a></dd>
                  <dd><a href="javascript:;" title="内蒙古酒店">内蒙古酒店</a></dd>
                  <dd><a href="javascript:;" title="宁夏酒店">宁夏酒店</a></dd>
                  <dd><a href="javascript:;" title="青海酒店">青海酒店</a></dd>
                  <dd><a href="javascript:;" title="山东酒店">山东酒店</a></dd>
                  <dd><a href="javascript:;" title="陕西酒店">陕西酒店</a></dd>
                  <dd><a href="javascript:;" title="山西酒店">山西酒店</a></dd>
                  <dd><a href="javascript:;" title="四川酒店">四川酒店</a></dd>
                  <dd><a href="javascript:;" title="台湾酒店">台湾酒店</a></dd>
                  <dd><a href="javascript:;" title="新疆酒店">新疆酒店</a></dd>
                  <dd><a href="javascript:;" title="西藏酒店">西藏酒店</a></dd>
                  <dd><a href="javascript:;" title="云南酒店">云南酒店</a></dd>
                  <dd><a href="javascript:;" title="浙江酒店">浙江酒店</a></dd>
                </dl>
                <div class="seo_line"></div>
              </div>
              <div>
                <dl class="seo_hot sta_fold">
                  <dt>
                    <h4>品牌推荐</h4>
                  </dt>
                  <dd><a href="javascript:;" title="7天连锁酒店">7天连锁酒店</a></dd>
                  <dd><a href="javascript:;" title="如家快捷酒店">如家快捷酒店</a></dd>
                  <dd><a href="javascript:;" title="汉庭酒店">汉庭酒店</a></dd>
                  <dd><a href="javascript:;" title="锦江之星酒店">锦江之星</a></dd>
                  <dd><a href="javascript:;" title="香格里拉酒店">香格里拉酒店</a></dd>
                  <dd><a href="javascript:;" title="格林豪泰酒店">格林豪泰</a></dd>
                  <dd><a href="javascript:;" title="莫泰168酒店">莫泰</a></dd>
                  <dd><a href="javascript:;" title="布丁酒店">布丁酒店</a></dd>
                  <dd><a href="javascript:;" title="桔子酒店">桔子酒店</a></dd>
                  <dd><a href="javascript:;" title="希尔顿酒店">希尔顿</a></dd>
                  <dd><a href="javascript:;" title="凯宾斯基酒店">凯宾斯基</a></dd>
                  <dd><a href="javascript:;" title="皇冠假日酒店">皇冠假日酒店</a></dd>
                  <dd><a href="javascript:;" title="假日酒店">假日酒店</a></dd>
                  <dd><a href="javascript:;" title="维也纳酒店">维也纳酒店</a></dd>
                  <dd><a href="javascript:;" title="星程酒店">星程酒店</a></dd>
                  <dd><a href="javascript:;" title="宜必思酒店">宜必思酒店</a></dd>
                  <dd><a href="javascript:;" title="洲际酒店">洲际酒店</a></dd>
                  <dd><a href="javascript:;" title="万豪酒店">万豪酒店</a></dd>
                  <dd><a href="javascript:;" title="速8酒店">速8酒店</a></dd>
                  <dd><a href="javascript:;" title="凯悦酒店">凯悦酒店</a></dd>
                  <dd><a href="javascript:;" title="百时快捷酒店">百时快捷酒店</a></dd>
                  <dd><a href="javascript:;" title="半岛酒店">半岛酒店</a></dd>
                  <dd><a href="javascript:;" title="诺富特酒店">诺富特酒店</a></dd>
                </dl>
                <div class="seo_line"></div>
              </div>
              <div>
                <dl class="seo_hot sta_fold">
                  <dt>
                    <h4>快速入口</h4>
                  </dt>
                  <dd><a href="javascript:;" title="酒店导航">酒店导航</a></dd>
                  <dd><a href="javascript:;" title="品牌大全">品牌酒店</a></dd>
                  <dd><a href="javascript:;" title="国内酒店大全">酒店大全</a></dd>
                  <dd><a href="javascript:;" title="酒店商家经营规则">酒店经营规则</a></dd>
                  <dd><a href="javascript:;" title="全球国家酒店">国家酒店</a></dd>
                  <dd><a href="javascript:;" title="热门酒店推荐">热门酒店</a></dd>
                  <dd><a href="javascript:;" title="eBooking酒店管理后台">eBooking</a></dd>
                  <dd><a href="javascript:;" title="礼品卡">礼品卡</a></dd>
                </dl>
                <div class="seo_line"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="MOD_BOX mod-box mod-back-top" style="display:none">
          <div class="mod-inner clearfix">
            <div class="side-bar"><span aria-label="按钮：回顶部" aria-modal="true" class="chat" title="Top" style="margin-bottom: 2px;"><i class="c-icon icon-back-top"></i></span><span aria-label="链接：客服" aria-modal="true" class="chat"><i class="c-icon icon-chat"></i></span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/css/iconfont.css'

import Swiper from 'swiper'
import 'swiper/css/swiper.css'

import SwiperBox from '@/components/SwiperBox.vue'

import { mapState } from 'vuex'

export default {
  name: 'HomeHotelContainer',
  data() {
    return {
      cityShow: false,
      cityText: '郑州',
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value1: '',
      restaurants: [],
      states: '',
      timeout: null
    }
  },
  components: {
    SwiperBox
  },
  computed: {
    ...mapState({
      SevenHotelList: state => {
        const cityTotal = state.hotel.hotelList.length
        const num = cityTotal > 7 ? Math.floor(Math.random() * (cityTotal - 7 - 0 + 1) + 0) : 0
        return state.hotel.hotelList.slice(num, num + 6)
      },
      cityList: state => {
        return state.hotel.cityList
      },
      cityActiveNum: state => {
        return state.hotel.cityActiveNum
      },
      hotelALL: state => {
        return state.hotel.hotelALL
      }
    })
  },
  methods: {
    changeCityNum(id, num) {
      this.$store.dispatch('getHotelList', {
        id,
        num
      })
    },
    changeCityShow(type) {
      this.cityShow = type
    },
    loadAll() {
      return this.hotelALL || []
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants

      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 3000 * Math.random())
    },
    createStateFilter(queryString) {
      return states => {
        return states.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      }
    },
    handleSelect(item) {
      this.$router.push('/hotel/detail/' + item.hotel_id)
      this.$store.dispatch('getHotelDetailInfo', item.hotel_id)
    }
  },
  mounted() {
    setTimeout(() => {
      new Swiper(
        this.$refs.mySwiper,
        {
          loop: true, // 循环模式选项
          autoplay: {
            delay: 5000 //1秒切换一次
          },

          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            bulletClass: 'my-bullet', //需设置.my-bullet样式
            bulletActiveClass: 'my-bullet-active'
          }
        },
        2000
      )
    }),
      // 获取酒店数据
      this.$store.dispatch('getHotelList', {
        id: 1,
        num: 0
      })
    // 获取城市
    this.$store.dispatch('getCityList')
    // 获取所有酒店信息
    this.$store.dispatch('getHotelAll')
    // 获取酒店房间名字
    this.$store.dispatch('getBaseName')
    setTimeout(() => {
      this.restaurants = this.loadAll()
    }, 1000)
  }
  // created() {
  //   this.axios
  //     .get('http://124.222.156.247:3002/api/hotel_list?id=1')
  //     .then(res => {
  //       console.log('lbb', res)
  //     })
  //     .catch(err => {
  //       console.log(err)
  //     })
  // }
}
</script>

<style lang="scss" scoped>
.height {
  height: auto !important;
}
.rotate {
  transform: rotate(180deg) scale(1.3) !important;
}
.show-hightlight,
label {
  letter-spacing: 0;
  text-align: left;
}
.none {
  display: none !important;
}
input,
textarea {
  outline: 0;
  box-sizing: border-box;
}
label {
  font-size: 14px;
  color: #8592a6;
  line-height: 18px;
  user-select: none;
}
.show-hightlight {
  font-weight: 700;
  font-size: 16px;
  color: #0f294d !important;
  line-height: 22px;
}
#ibu_hotel_container {
  .m-homePage {
    margin-top: -54px;
    position: relative;
    .top {
      padding: 64px 0 0;
      min-height: 280px;
      box-sizing: border-box;
      position: relative;
      .ellipse-wrap {
        width: 100%;
        height: 280px;
        position: absolute;
        top: 0;
        overflow: hidden;
        .ellipse {
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          border-radius: 50%;
          overflow: hidden;
          background: transparent;
          width: 400%;
          height: 400%;
          width: 400vw;
          height: 400vw;
        }
      }
      .bg {
        width: 100%;
        width: 100vw;
        height: 280px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      .main-topic {
        margin: 0 auto 16px;
        max-width: 1160px;
        padding: 0 20px;
        .slogan {
          width: 100%;
          background-image: url('../assets/images/download.png');
          background-repeat: no-repeat;
          min-height: 50px;
          position: relative;
        }
      }
      .inner-page {
        max-width: 1160px;
        margin: 0 auto;
        padding: 0 20px;
        .list-search-container {
          width: 100%;
          background: #fff;
          box-shadow: 0 8px 20px 0 rgb(97 121 157 / 16%);
          box-sizing: border-box;
          position: relative;
          padding: 24px;
          .ul {
            margin: 0 auto;
            list-style: none;
            box-sizing: border-box;
          }
          .list-item {
            display: inline-block;
            height: 100%;
            vertical-align: top;
            box-sizing: border-box;
            border: 1px solid #dadfe6;
            display: inline-flex;
            justify-content: center;
            align-items: center;
          }
          .search-container,
          .search-container .search-box {
            position: relative;
            width: 100%;
            height: 100%;
          }
          .li-item-destination {
            label {
              top: 16px;
              left: 16px;
            }
            #hotels-destination {
              padding: 28px 16px 0;
            }
          }
          .search-box {
            label {
              position: absolute;
              top: 8px;
              left: 12px;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              max-width: calc(100% - 16px);
            }
            #hotels-destination {
              box-sizing: border-box;
              height: 100%;
              padding: 28px 12px 0;
              width: 100%;
              border: none;
              border-bottom: 2px solid transparent;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .hot-city-picker {
            width: 553px;
            background: #fff;
            position: absolute;
            top: 100%;
            left: -1px;
            z-index: 99;
            border: 1px solid #dadfe6;
            max-height: 480px;
            overflow-y: scroll;
            .area-item {
              .title {
                font-size: 14px;
                color: #666;
                background: #f7f7fb;
                height: 30px;
                line-height: 30px;
                padding-left: 8px;
                font-weight: 700;
              }
              ul {
                padding: 5px;
                list-style: none;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                li {
                  width: 20%;
                  cursor: pointer;
                  span {
                    display: block;
                    padding: 1px 5px;
                    height: 30px;
                    font-size: 14px;
                    color: #333;
                    letter-spacing: 0;
                    line-height: 30px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }
                  &:hover {
                    background: #5aa0ff;
                  }
                }
              }
            }
          }
          .drop-result-list {
            width: 640px;
            box-shadow: 0 8px 20px 0 rgb(0 41 99 / 20%);
            background: #fff;
            position: absolute;
            top: 100%;
            z-index: 99;
            border: 1px solid #dadfe6;
            max-height: 480px;
            overflow-y: scroll;
            .not_found {
              padding: 8px 8px 8px 16px;
              font-size: 14px;
              color: #ee3b28;
              letter-spacing: 0;
              line-height: 18px;
            }
          }
          .list-calendar {
            background: #fff;
          }
          .time-tab {
            .in {
              position: absolute;
              // top: 8px;
              // left: 12px;
            }
            .focus-input {
              width: 100%;
              height: 100%;
              padding: 28px 12px 0;
              border: none;
              border-bottom: 2px solid transparent;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .calendar-container {
            background-color: #fff;
            display: inline-flex;
            justify-content: space-between;
            position: relative;
            width: 100%;
            height: 100%;
            .time-tab {
              position: relative;
              width: calc(50% - 48px);
              height: 100%;
              .out {
                position: absolute;
                // top: 8px;
                // right: 12px;
              }
              .out-time {
                text-align: right;
              }
            }
            .nights {
              position: absolute;
              font-size: 14px;
              color: #0f294d;
              line-height: 18px;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              z-index: 3;
              user-select: none;
            }
          }
          .li-item-calendar {
            .in {
              top: 16px;
              left: 16px;
            }
            .focus-input {
              padding: 28px 16px 0;
            }
            .out {
              top: 16px;
              right: 16px;
            }
          }
          .room-guest-container {
            width: 100%;
            height: 100%;
            min-width: 160px;
            user-select: none;
            position: relative;
            outline: none;
            * {
              box-sizing: border-box;
            }
            .room-guest {
              cursor: pointer;
            }
            .room-guest-normal {
              background: #fff;
              width: 100%;
              height: 100%;
              position: relative;
              padding: 16px;
              cursor: pointer;
              label {
                top: 16px;
                left: 16px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
              }
              .info {
                margin-top: 4px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
              }
              .icon-arrow {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 10px;
                font-size: 16px;
              }
              .icon-arrow-down {
                font-size: 24px !important;
              }
            }
            .choice {
              position: absolute;
              top: calc(100% + 1px);
              z-index: 9;
              left: -1px;
              background: #fff;
              width: 300px;
              padding: 16px;
              border: 1px solid #ddd;
              cursor: pointer;
            }
            .child-kid {
              margin-bottom: 15px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              label {
                color: #0f294d;
                font-size: 16px;
                span:last-child {
                  display: block;
                  font-size: 12px;
                  line-height: 1;
                  color: #6b8299;
                }
              }
            }
            .actions {
              display: flex;
              align-items: center;
              .icon-btn {
                width: 24px;
                height: 24px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: #fff;
                border: 1px solid #dadfe6;
                border-radius: 50%;
                color: #999;
                .btn {
                  position: relative;
                  top: 1px;
                  font-weight: 700;
                  user-select: none;
                  -webkit-user-select: none;
                }
              }
              .icon-btn.disabled {
                cursor: default;
                background-color: #eee;
                border-color: #eee;
                color: #fff;
              }
              .count {
                font-size: 18px;
                color: #0f294d;
                width: 36px;
                text-align: center;
              }
            }
            .done {
              text-align: right;
              margin-top: 20px;
              cursor: pointer;
              span {
                display: inline-block;
                min-width: 100px;
                padding: 0 20px;
                font-size: 16px;
                color: #2681ff;
                border-radius: 4px;
                cursor: pointer;
              }
            }
            .child-age {
              .child-tips {
                font-size: 16px;
                color: #333;
                margin-bottom: 8px;
              }
              .age-select {
                overflow-x: hidden;
                overflow-y: auto;
                max-height: 80px;
              }
            }
            .childage {
              min-width: 70px;
              max-width: 80px;
              margin-right: 5px;
              font-size: 14px;
              background: #f5f5f9;
              border: 1px solid #ccc;
              border-radius: 4px;
              color: #333;
              height: 24px;
              margin-bottom: 4px;
            }
          }
          .li-item-roomguest {
            .room-guest-normal {
              padding: 16px;
            }
          }
          .search-keyword-container {
            width: 100%;
            height: 100%;
            background: #fff;
            position: relative;
            .h-full {
              height: 100%;
            }
            label {
              position: absolute;
              top: 8px;
              left: 12px;
              font-size: 14px;
              color: #8592a6;
            }
            #keyword {
              box-sizing: border-box;
              height: 100%;
              padding: 30px 12px 0;
              width: 100%;
              font-weight: 600;
              font-size: 16px;
              color: #0f294d;
              letter-spacing: 0;
              text-align: left;
              line-height: 22px;
              border: none;
              border-bottom: 2px solid transparent;
              overflow: hidden;
              text-overflow: ellipsis;
              &::placeholder {
                color: rgb(118, 118, 118);
                font-size: 14px;
              }
            }
          }
          .list-keyword {
            border-left: none;
            // border-bottom: none;
            // border-right: none;
            label {
              top: 16px;
              left: 16px;
            }
            #keyword {
              border-bottom: 1px solid #dadfe6;
              padding: 28px 16px 0;
            }
            .drop-result-list {
              width: 640px;
              box-shadow: 0 8px 20px 0 rgb(0 41 99 / 20%);
              background: #fff;
              position: absolute;
              top: 100%;
              z-index: 99;
              border: 1px solid #dadfe6;
              max-height: 480px;
              overflow-y: scroll;
              .not_found {
                padding: 8px 8px 8px 16px;
                font-size: 14px;
                color: #ee3b28;
                letter-spacing: 0;
                line-height: 18px;
              }
            }
          }
          .list-btn {
            border: none;
            overflow: hidden;
            .search-btn-wrap {
              font-size: 32px;
            }
          }
          .search-btn-wrap {
            background: #2681ff;
            width: 100%;
            height: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 32px;
            border: none;
            cursor: pointer;
          }
          .star-rate-container {
            display: inline-flex;
            align-items: center;
            * {
              user-select: none;
            }
            label {
              margin-right: 16px;
              cursor: pointer;
              font-size: 16px;
              color: #333;
            }
            .rate {
              display: inline-flex;
              justify-content: center;
              align-items: center;
              background: #f0f2f5;
              border-radius: 1px;
              height: 22px;
              margin-right: 16px;
              padding: 4px 8px;
              font-size: 12px;
              color: #0f294d;
              cursor: pointer;
              border: 1px solid transparent;
            }
          }
          .drop-result-list {
            width: 640px;
            box-shadow: 0 8px 20px 0 rgb(0 41 99 / 20%);
            background: #fff;
            position: absolute;
            top: 100%;
            z-index: 99;
            border: 1px solid #dadfe6;
            max-height: 480px;
            overflow-y: scroll;
            .associative-item {
              box-sizing: border-box;
              height: auto;
              display: flex;
              align-items: flex-start;
              justify-content: space-between;
              cursor: pointer;
              color: #333;
              padding: 12px 16px;
              font-size: 12px;
              .left-part {
                display: flex;
                width: 526px;
                line-height: 22px;
                align-items: flex-start;
              }
              .search-type {
                font-size: 18px;
                color: #0f294d;
                position: relative;
              }
              .content {
                margin-left: 10px;
                font-size: 14px;
                line-height: 18px;
                max-width: 498px;
                strong {
                  font-weight: 400;
                  color: #2681ff;
                }
              }
              .content.base {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
              }
            }
            .title-item {
              .title {
                width: 100%;
                font-size: 14px;
                color: #333;
                font-weight: 600;
                pointer-events: none;
                user-select: none;
                cursor: default;
              }
              &.title-other {
                border-top: 1px solid #dadfe6;
              }
            }
          }
        }
      }
    }
    .inner-page {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 20px;
      .m-recentHotels {
        width: 100%;
        margin-top: 16px;
        margin-bottom: 48px;
        animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation-duration: 0.9s;
      }
    }
  }
}
.myswiper {
  width: 1160px;
  height: 188px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.swiper-pagination-bullets {
  width: auto;
  left: 93%;
}
::v-deep .my-bullet {
  display: inline-block;
  background: rgb(255, 255, 255);
  opacity: 0.4;
  margin-right: 5px;
  width: 8px;
  height: 8px;
  z-index: 999;
  border-radius: 100%;
}
::v-deep .my-bullet-active {
  opacity: 0.8;
}
.icon-search {
  font-size: 32px !important;
}
.home-server-upgrade {
  margin-top: 48px;
  h3 {
    font-size: 28px;
    color: #333;
    text-align: center;
    line-height: 34px;
  }
  ul {
    margin-top: 24px;
    li {
      display: inline-block;
      width: 33.333%;
      .icon-logo {
        display: block;
        width: 48px;
        height: 48px;
        margin: 0 auto;
      }
      .service1 {
        background: url('../assets/images/service1.png') no-repeat 50%;
        background-size: 48px 48px;
      }
      .service2 {
        background: url('../assets/images/service2.png') no-repeat 50%;
        background-size: 48px 48px;
      }
      .service3 {
        background: url('../assets/images/service3.png') no-repeat 50%;
        background-size: 48px 48px;
      }
      .desc {
        font-size: 14px;
        color: #455873;
        text-align: center;
        line-height: 18px;
        margin-top: 8px;
        font-weight: 500;
      }
    }
  }
  .link {
    font-size: 14px;
    line-height: 18px;
    text-align: right;
    font-weight: 700;
    margin-top: 16px;
    a {
      color: #287dfa;
      cursor: pointer;
    }
  }
}
.icon-arrow-right {
  font-size: 20px;
  position: relative;
  top: 2px;
}
.u-btn {
  font-size: 16px;
  display: inline-block;
  height: 40px;
  padding: 0 16px;
  box-sizing: border-box;
  line-height: 40px;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: 2px;
  cursor: pointer;
  border: 0;
  *display: inline;
  *zoom: 1;
  background: none;
}
.m-hotelRecommend_title {
  font-size: 28px;
  text-align: center;
  color: #333;
  margin-top: 64px;
  margin-bottom: 20px;
}
.m-hotelRecommend_tabs {
  text-align: center;
  margin-bottom: 24px;
  height: 32px;
  overflow: hidden;
  width: 95%;
  display: flex;
  justify-content: space-between;
  button {
    margin: 0 6px;
  }
  .u-btn-primary {
    background: rgba(68, 138, 255, 0.1);
    border-radius: 2px;
    color: #287dfa;
    border: 1px solid transparent;
  }
  .u-btn-filter {
    border: 1px solid #dadfe6;
    border-radius: 2px;
    background: #fff;
    color: #dadfe6;
    color: #0f294d;
  }
}
.u-btn-sm {
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  min-width: 60px;
}
.m-allcity {
  display: inline-block;
  position: relative;
  z-index: 10;
}
.icon-arrow-down {
  font-size: 16px;
  transform: scale(1.3);
  display: inline-block;
}
.m-hotelJoin {
  margin: 0 -8px 10px;
  .join-item {
    display: inline-block;
    margin: 0 8px 5px;
    width: calc(33.333% - 16px);
    img {
      display: block;
      width: 100%;
    }
  }
}
.seo_201305 {
  clear: both;
  margin-bottom: 30px;
  padding: 10px 15px;
  border: 2px solid #dedede;
  color: #999;
  line-height: 2;
  h4 {
    font-size: 12px;
    font-weight: 700;
    color: #666;
  }
  .p {
    margin-bottom: 10px;
    font-size: 12px;
  }
  .seo_more {
    margin-left: 10px;
  }
  .seo_hot {
    height: 24px;
    margin-right: -5px;
    padding-left: 80px;
    display: block;
    overflow: hidden;
    *zoom: 1;
    dt {
      float: left;
      display: inline;
      width: 80px;
      margin-left: -80px;
    }
    dd {
      float: left;
      width: 84px;
      height: 24px;
      line-height: 22px;
      margin-right: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      a {
        color: #999;
        font-size: 12px;
      }
    }
  }
  .seo_line {
    height: 0;
    overflow: hidden;
    border-bottom: 1px dotted #ccc;
    margin: 5px 0;
  }
}
.mod-back-top {
  margin-bottom: 0;
  width: 1180px;
  margin-left: auto;
  margin-right: auto;
  font-size: 12px;
  .side-bar {
    position: fixed;
    bottom: 205px;
    margin-left: 1250px;
    width: 56px;
    z-index: 899;
    span {
      width: 48px;
      padding: 12px 6px 10px;
      float: left;
      background-color: #2681ff;
      border-radius: 3px;
      text-align: center;
      color: #fff;
      line-height: 1.3;
    }
  }
  .c-icon {
    display: inline-block;
    font-size: 0;
    vertical-align: middle;
    *display: inline;
    *zoom: 1;
    background: url('../assets/images/global-sprite.1a67319d.png') no-repeat 1024px 1024px;
  }
  .icon-back-top {
    width: 24px;
    height: 22px;
    background-position: -122px -154px;
  }
  .icon-chat {
    width: 26px;
    height: 26px;
    background-position: -70px -292px;
  }
}
@media screen and (min-width: 1280px) {
  .list-search-container .ul {
    max-width: 1160px !important;
  }
  .list-search-container .list-destination {
    width: 270px !important;
    border-right: none !important;
  }
  .list-search-container .list-item {
    height: 76px !important;
  }
  .list-search-container .list-calendar .time-tab {
    width: calc(50% - 24px) !important;
  }
  .list-search-container .list-roomguest {
    width: 175px !important;
    border-left: none !important;
  }
  .list-search-container .list-btn {
    width: 76px;
    border-radius: 0 2px 2px 0;
  }
}
</style>